<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";

%>
<html>
<head>
    <base href="<%=basePath%>">
    <title>mytitle</title>
    <script src="ECharts/echarts.min.js"></script>
    <script src="jquery/jquery-1.11.1-min.js"></script>
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

    <script type="text/javascript">

        $(function () {

            //页面加载完毕后，绘制统计图表
           getCharts();

        })

        function getCharts() {

            var date = new Date();

            var year = date.getUTCFullYear();

            $.ajax({
                url : "workbench/activity/getCharts.do",
                data : {
                    "year": year
                },
                type : "get",
                dataType : "json",
                success : function(data) {
                    var myChart = echarts.init(document.getElementById('main'));

                    //我们要画的图
                    var option = {

                        title : {
                            text : '市场活动柱形图'
                        },
                        tooltip: {},
                        legend: {
                            data:['数量']
                        },
                        xAxis: {
                            data: data.dataList
                        },
                        yAxis: {
                            type: 'value',
                            min:0,
                            minInterval:1
                        },
                        series: [{
                            name: '数量',
                            type: 'bar',
                            data: data.total
                        }]
                    };

                    myChart.setOption(option);

                    myChart.on('click', function (params) {

                        showActivity(params.name);

                    })
                }
            })

        }

        function showActivity(name) {

            $.ajax({
                url : "workbench/activity/getActivityByTime.do",
                data : {
                    "time" : name
                },
                type : "get",
                dataType : "json",
                success : function(data) {

                    var html = "";

                    $.each(data,function (i,n) {

                        html += '<tr>';
                        html += '<td>'+n.name+'</td>';
                        html += '<td>'+n.owner+'</td>';
                        html += '<td>'+n.cost+'</td>';
                        html += '<td>'+n.startDate+'</td>';
                        html += '<td>'+n.endDate+'</td>';
                        html += '<td>'+n.description+'</td>';
                        html += '</tr>';

                    })

                    $("#activitySearchBody").html(html);

                    $("#activityModal").modal("show");

                }
            })


        }


    </script>
</head>
<body>

    <!-- 查看市场活动的模态窗口 -->
    <div class="modal fade" id="activityModal" role="dialog">
        <div class="modal-dialog" role="document" style="width: 80%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title">市场活动</h4>
                </div>
                <div class="modal-body">
                    <table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
                        <thead>
                        <tr style="color: #B3B3B3;">
                            <%--<td><input type="checkbox" id="qx"/></td>--%>
                            <td>名称</td>
                            <td>所有者</td>
                            <td>费用</td>
                            <td>开始日期</td>
                            <td>结束日期</td>
                            <td>描述</td>
                            <td></td>
                        </tr>
                        </thead>
                        <tbody id="activitySearchBody">

                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 1000px;height:400px;"></div>

</body>
</html>



























































